<template>
  <div class="help-container pt50">
    <HearderTop></HearderTop>
    <div class="serach-top">
      <div class="left">
        <el-icon>
          <Location />
        </el-icon>
        <span class="f12 ml10 mr10">当前位置：</span>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">帮助导航</el-breadcrumb-item>
          <el-breadcrumb-item>帮助中心</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="right">
        <el-input
          v-model.trim="searchkey"
          style="width: 388px"
          placeholder="请输入您需要了解的问题关键词如“订单"
          :suffix-icon="Search"
          @change="search"
        />
      </div>
    </div>
    <div class="content">
      <el-container style="height: calc(100vh - 110px - 40px)">
        <el-aside width="200px">
          <div class="page-item mb40" v-for="item in list" :key="item.id">
            <h1 class="f16" v-if="item?.children?.length > 0">{{ item.title }}</h1>
            <p v-else @click="changeNode(item)" :class="{ active: currentObj.id === item.id }">{{ item.title }}</p>
            <p
              @click="changeNode(_item)"
              :class="{ active: currentObj.id === _item.id }"
              v-for="_item in item.children"
              :key="_item.id"
            >
              {{ _item.title }}
            </p>
          </div>
        </el-aside>
        <el-main>
          <div v-html="currentObj.content"></div>
        </el-main>
      </el-container>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import HearderTop from "@/views/home/components/HearderTop";
import { Calendar, Search } from "@element-plus/icons-vue";
import { getHelpList } from "@/apis/helpCenter/help";

const searchkey = ref("");
const list = ref([]);
const LIST = ref([]);
const currentObj = ref({});

onMounted(() => {
  getList();
});

const getList = () => {
  getHelpList().then(res => {
    if (res.code === 200) {
      list.value = res.data;
      const List = JSON.parse(JSON.stringify(res.data));
      LIST.value = JSON.parse(JSON.stringify(res.data));
      const firstLeafNode = findFirstLeafNode(List); //第一个叶子节点
      currentObj.value = firstLeafNode;
    }
  });
};

const search = () => {
  const filtTree = filterTree(searchkey.value, LIST.value, 1);
  console.log("这是过滤之后的tree", filtTree);
  list.value = filtTree;
  const firstLeafNode = findFirstLeafNode(list.value); //第一个叶子节点
  currentObj.value = firstLeafNode;
};
// tree数据过滤
const filterTree = (value = "", arr, level = 1) => {
  if (!arr) {
    return [];
  }
  let newList = [];
  arr.forEach(item => {
    if (item.title.includes(value)) {
      if (level === 1) {
        newList.push(item);
      } else {
        const Children = filterTree(value, item.children);
        const obj = {
          ...item,
          children: Children
        };
        // console.log(item, obj, Children);
        newList.push(obj);
      }
    } else {
      if (item.children && item.children.length > 0) {
        const Children = filterTree(value, item.children);
        const obj = {
          ...item,
          children: Children
        };
        if (Children && Children.length > 0) {
          newList.push(obj);
        }
      }
    }
  });
  return newList;
};

const changeNode = item => {
  currentObj.value = item;
};
const findFirstLeafNode = tree => {
  // 定义递归函数 traverse，用于深度搜索树的每个节点
  function traverse(node) {
    // 如果当前节点为叶子节点，即没有子节点，则返回该节点
    if (!node.children || node.children.length === 0) {
      return node;
    }
    // 如果当前节点有子节点，则遍历每个子节点，继续递归调用 traverse 函数
    for (const child of node.children) {
      const result = traverse(child);
      // 如果在子节点中找到了第一个叶子节点，则立即返回该节点
      if (result) {
        return result;
      }
    }
  }

  // 外部循环遍历树的根节点
  for (const node of tree) {
    // 对于每个根节点，都调用 traverse 函数来查找第一个叶子节点
    const result = traverse(node);
    // 如果在当前根节点下找到了第一个叶子节点，则立即返回该节点
    if (result) {
      return result;
    }
  }
  return null;
};
</script>

<style lang="scss" scoped>
:deep(div[data-w-e-type="video"]) {
  background-color: black;
  text-align: center;
  video {
    max-width: 100%;
  }
}
p,
h1 {
  padding: 0;
  margin: 0;
}

.help-container {
  height: calc(100% - 50px);
  .serach-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    height: 60px;
    box-sizing: border-box;
    background-color: white;
    .left {
      display: flex;
      height: 100%;
      align-items: center;
      color: #86909c;
    }
  }
  .content {
    margin: 20px;
    background-color: white;
    box-shadow: 4px 5px 16px 0px rgba(4, 19, 74, 0.04);
    :deep(.el-container) {
      .el-aside {
        border-right: 1px solid #e1e6ed;
        padding: 20px;
      }
      .el-main {
        table {
          border-collapse: collapse;
          margin-top: 2px;
          th,
          td {
            border: 1px solid #ccc;
            padding: 5px;
          }
        }
      }
    }
    .page-item {
      h1 {
        color: #3d3d3d;
        margin-bottom: 14px;
      }
      p {
        font-size: 14px;
        color: #86909c;
        line-height: 32px;
        margin: 0 -20px;
        padding-left: 20px;
        margin-top: 8px;
        &:hover {
          cursor: default;
        }
        &.active {
          background-color: #eef1f4;
          color: #3d3d3d;
        }
      }
    }
  }
}
</style>
